<!-- 文章详情页 -->
<template>
  <div class="article-detail-wrap">
    <!-- 顶部导航栏 -->
    <van-nav-bar class="top-bar" title="文章详情" fixed>
      <template #left fixed >
        <i @click="$router.push({path:'/'})" class="iconfont icon-zuojiantou"></i>
      </template>
    </van-nav-bar>
    <!-- 顶部导航栏 -->
    <!-- 加载页面 -->
    <div class="loading-wrap" v-if="loading">
    <van-loading color="#1989fa" vertical size='56' text-color='#3dc1d3'>加载中</van-loading>
    </div>
    <!-- 加载页面 -->
    <!-- 加载失败页面 -->
    <div class='loading-fail' v-else-if="!articleDetail.title">
      <i class="iconfont icon-wuwangluo"></i>
      <span>加载失败</span>
    </div>
    <!-- 加载失败页面 -->
    <!-- 文章详情 -->
    <div class="detail" v-else>
      <h4>{{articleDetail.title}}</h4>
      <van-cell title="单元格" value="内容" class="detail-cell" >
        <template #value>
          <user-follow :userId='articleDetail.aut_id'
          :isFollow='articleDetail.is_followed'
          @updata-is-followed='articleDetail.is_followed=!articleDetail.is_followed'
          ></user-follow>
          <!-- <van-button round type="primary" v-if="articleDetail.is_followed"
           @click="onFllow" class="follow-button" :loading='followLoading'>已关注</van-button>
          <van-button round type="primary" v-else @click="onFllow"
           :loading='followLoading'>+ 关注</van-button> -->
        </template>
        <template #title>
          <div class="image-wrap">
            <van-image
              round
              fit='cover'
              :src="articleDetail.aut_photo"
            />
          </div>
          <div class="userinfo">
            <span>{{articleDetail.aut_name}}</span>
            <span>{{relactiveTime}}</span>
          </div>
        </template>
      </van-cell>
      <div ref="content" class="article-content markdown-body" v-html="articleDetail.content">
      </div>
      <!-- 评论列表 -->
      <comment-list :articleId='articleDetail.art_id'
                    @getTotalComment='totalCommentCount=$event'
                    v-model:list='commentList'
                    @onReplyClick='replyComment'
                    @update-comment-list='commentList.push(...$event)'
      ></comment-list>
      <!-- 评论列表 -->
    </div>
    <!-- 文章详情 -->
    <!-- 底部tab栏 -->
    <div class='bottom-bar' v-if="!loading">
      <van-field v-model="value" placeholder="写评论" @click="popupShow=true"/>
      <van-tabbar v-model="active" active-color='#7d7e80'>
        <van-tabbar-item :badge="totalCommentCount" @click="popupShow=true">
          <span>评论</span>
          <template #icon>
            <van-icon name="more-o" />
          </template>
        </van-tabbar-item>
        <collect-article v-model="articleDetail.is_collected"
         :articleId='articleDetail.art_id'></collect-article>
        <like v-model="articleDetail.attitude" :articleId='articleDetail.art_id' />
        <van-tabbar-item >
          <span>分享</span>
          <template #icon>
            <van-icon name="share-o" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 底部tab栏 -->
    <!-- 发布评论弹出层 -->
    <van-popup
      class="bottom-popup"
      v-model:show="popupShow"
      close-on-popstate
      closeable
      round
      position="bottom"
    >
    <comment-post :articleId='articleDetail.art_id' @postSuccess='onPostSuccess'></comment-post>
    </van-popup>
    <!-- 发布评论弹出层 -->
    <!-- 评论回复 -->
    <van-popup
      class="bottom-popup"
      v-model:show="replyShow"
      close-on-popstate
      closeable
      round
      position="bottom"
      :style="{ height: '90%' }"
    >
    <comment-reply :currentComment='currentComment'
                   v-if="replyShow"
                   :articleId='articleId'
    ></comment-reply>
    </van-popup>
    <!-- 评论回复 -->
  </div>
</template>

<script>
import { getArticleDetail } from '../../api/article'
import time from '@/utils/day.js'
import { ImagePreview } from 'vant'
import UserFollow from '@/components/userFollow.vue'
import CollectArticle from '../../components/collectArticle.vue'
import Like from '../../components/like.vue'
import CommentList from '../../components/commentList.vue'
import CommentPost from '../../components/commentPost.vue'
import CommentReply from '../../components/commentReply.vue'
export default {
  name: 'Article',
  components: {
    UserFollow,
    CollectArticle,
    Like,
    CommentList,
    CommentPost,
    CommentReply
  },
  props: {
    articleId: {
      type: [String, Number, Object],
      required: true
    }
  },
  data () {
    return {
      value: '',
      active: 0,
      articleDetail: {}, // 储存文章详情
      loading: true, // 控制加载动画
      followLoading: false, // 控制关注按钮加载动画
      totalCommentCount: 0, // 评论总数
      popupShow: false, // 评论弹出层是否显示
      replyShow: false, // 回复弹出层是否显示
      commentList: [], // 评论列表，传递给子组件commentList.vue
      currentComment: {} // 点击回复的当前评论项数据
    }
  },
  computed: {
    relactiveTime () {
      return time(this.articleDetail.pubdate)
    }
  },
  created () {
    // 手动初始化不会自动设置为true
    this.loading = true
    this.localArticleDetail()
  },
  methods: {
    async localArticleDetail () {
      try {
        const res = await getArticleDetail(this.articleId)
        this.articleDetail = res.data.data
        // console.log(this.articleDetail)
        // 请求成功关闭loading动画
        this.loading = false
        // 请求成功获取文章内容的img元素
        // DOM更新是异步的
        this.$nextTick(() => {
          // console.log(this.$refs.content)
          // DOM集合是个伪数组，forEach不能遍历伪数组，使用Array.from转换为真数组
          const imgElements = Array.from(this.$refs.content.getElementsByTagName('img'))
          // ImagePreview组件中图片的总数为images参数中数组的长度，所以要把完整的img数组传进去
          const images = []
          imgElements.forEach((item, index) => {
            images.push(item.src)
            item.onclick = () => {
              ImagePreview({
                images,
                startPosition: index
              })
            }
          })
        })
      } catch (error) {
        console.log(error)
      }
      // 无论成功或者失败都要关闭loading
      this.loading = false
    },
    // 发布评论
    onPostSuccess (val) {
      // 关闭弹出层
      this.popupShow = false
      // 评论总数加一
      this.totalCommentCount++
      // 将评论置顶
      this.commentList.unshift(val)
    },
    // 点击回复评论
    replyComment (val) {
      // 开启弹出层
      this.replyShow = true
      // 保存子组件传递过来的数据
      this.currentComment = val
    }
  }
}
</script>

<style  scoped lang='less'>
@import './github-markdown.css';
.article-detail-wrap {
  /deep/.top-bar {
    .van-nav-bar__content {
      color: #fff;
      background-color: rgb(17, 134, 212);
      .van-nav-bar__left {
        i.iconfont {
          font-size: 45px;
        }
      }
      .van-nav-bar__title {
        color: #fff;
      }
    }
  }
  .loading-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
  }
  .loading-fail {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 500px;
    i {
      font-size: 80px;
      margin-bottom: 10px;
    }
    span {
      color: red;
      font-size: 40px;
    }
  }
  /deep/.detail {
    margin: 100px auto ;
    width: 90%;
    height: 85vh;
    overflow-y: auto;
    .detail-cell {
      background-color: rgb(252, 252, 252);
      .van-cell__title {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: -80px;
        .userinfo {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding-left: 20px;
        }
        .image-wrap {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          img.van-image__img {
            width: 90px;
            height: 90px;
          }
        }
      }
      .van-cell__value {
        display: flex;
        justify-content:flex-end;
        align-items: center;
        .van-button {
          width: 150px;
          height: 70px;
        }
        .follow-button {
          background-color: rgb(243, 243, 243);
          color: rgb(123, 124, 124);
          border: none;
        }
      }
    }
    .van-list__finished-text {
      margin: 60px auto 0;
    }
  }
  /deep/.bottom-bar {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content:flex-end;
    align-items: center;
    border-top: 1px solid rgb(189, 189, 189);
    width: 100%;
    .van-cell.van-field{
      height: 100px;
      flex: 1;
    }
    .van-tabbar.van-tabbar {
      flex: 2.5;
      position:unset;
      .collected {
        color: rgb(199, 118, 25) !important;
      }
      .liked {
        color: rgb(233, 25, 25) !important;
      }
    }
  }
  .article-content {
    overflow: hidden;
    margin-top: 30px;
  }
  /deep/.bottom-popup {
    .comment-popup {
      .comment-input {
        padding: 70px 100px 0 50px !important;
        margin-bottom: 50px;
        .van-field__word-limit {
          padding: 0;
        }
      }
      .release-comment-btn {
        background-color:pink;
        padding: 0;
        border: 0;
        font-size: 25px;
        vertical-align:baseline !important;
        color: rgb(48, 124, 224);
        width: 80px;
        height: 50px;
        position: absolute;
        bottom: 50px;
        right: 10px;
      }
    }
  }
}
</style>
